<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Aprendiendo jQuery</title>
		<script src="jquery-1.8.3.min.js"> </script>
		
		<script type="text/javascript">
			$(document).on('ready', function(){
				//Asignamos una propiedad de fondo
				$('body').css('background', '#FFF');

				var cssH1 = {
						'text-align' : 'center',
						'color' : 'blue'
				}

				//pasamos objeto json
				$('h1').css(cssH1);
				
				//recuperamos el valor del background del item2
				var bgItem2 = $('#div2').css('background-color');
				var cItem2 = $('#div2').css('color');
				
				//si son iguales cambiamos color letra div2
				if (bgItem2 === cItem2)
					$('#div2').css('color', 'white');
					
				$(document).on('click',function(){
					if($('#cme').hasClass('cme'))
					{
						$('#cme').removeClass('cme');
					}else{
						$('#cme').addClass('cme');
					}
					$('#cme2').toggleClass('cme');
				});
				
			});
		</script>
		<style>
		body
		{
			background:#CCC;
			color:#000;
			font-family:Arial;
			margin:0;
			padding:0;
		}
		#div1
		{
			background: #F6F6F6;
			height: 50px;
		}
		#div2
		{
			background:#000;
			heigth:50px;
		}
		.cme
		{
			background-color: red;
		}
		div{
			margin: 5% auto;
			width:200px;
		}
		</style>
	</head> 
	<body>
		<h1>Probando Metodo .css() de jQuery</h1>
		<div id="div1">Primer div</div>
		<div id="div2">Segundo div</div>
		<div id="cme">Pulsame</div>
		<div id="cme2" class="cme">Pulsame</div>
	</body>
</html>